import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById } from '../../shared/helpers';
import * as ProgressRingExamples from './base/example';

<div className="lead doc">
  Customizable and configurable progress ring. Will display progress in a circular progress bar factor, and is capable of displaying iconography inside of the ring structure.
</div>

<CodeView exampleOnly>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-partially-filled')}
</CodeView>

## About Progress Ring

The Progress Ring component renders a svg-based progress ring.

Content (typically iconography) can be rendered inside the progress ring. For the current supported size of this progress ring, xxs sized icons should be used.

<Blockquote type="note" header="Styling Note">
  <p>
    If you plan to override the size properties of Progress Ring, use discrete values rather than percentages (ie. 4rem, not 40%). The inner structure of Progress Ring requires the container dimensions to remain square with an 1:1 aspect ratio, which isn't achievable with percentage values in most contexts.
  </p>
</Blockquote>

### Implementation Guidelines

#### Defining Completeness

The 'completeness' of the Progress Ring is indicated by the circular shape (pie slice), which is a svg shape of an arc.

The path declaration looks complex, but is actually pretty straightforward, with just a few parts that need customization.

The breakdown of the progress ring's `d` attribute can be broken down like so:

`d="M 1 0 A 1 1 0 {isLong} 1 {arcX} {arcY} L 0 0"`

- isLong: a binary flag if the arc should 'take the long path' (used for > 50% fill)
- arcX: the arc's x position, formulated by Math.cos(2 * Math.PI * fillPercent)
- arcY: the arc's y position, formulated by Math.sin(2 * Math.PI * fillPercent)

These calculations work in accordance with the defined svg viewBox, which goes from -1 to 1, on both x and y axis.

#### Content

The Progress Ring is currently designed to display any icon from our icon set.

### Accessibility

`.slds-progress-ring__progress` is the visual indicator of progress and needs proper aria roles and settings:
- `role` : `progressbar`
- `aria-valuemin` : `0` // the smallest valid value
- `aria-valuemax` : `100` // the largest valid value
- `aria-valuenow` : `{fill}` // the current fill value

Proper accessibility guidelines should be followed on any icons used within this Progress Ring component.

## Base

<CodeView>
  {getDisplayElementById(ProgressRingExamples.default)}
</CodeView>

## Examples

### Partially Drained

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-partially-drained')}
</CodeView>

### Partially Drained with Warning Icon

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-warning')}
</CodeView>

### Partially Filled

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-partially-filled')}
</CodeView>

### Partially Filled with Warning Icon

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-partially-filled-warning')}
</CodeView>

### With Expired Icon

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-expired')}
</CodeView>

### Complete

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-complete')}
</CodeView>

### Large Size

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-large')}
</CodeView>

### Active Step

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-active-step')}
</CodeView>

Set the color of the ring to the active step color.

### Theme - Warning

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-theme-warning')}
</CodeView>

Set the color of the ring to the warning color.

### Theme - Expired

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-theme-expired')}
</CodeView>

Set the color of the ring to the expired color.

### Theme - Complete

<CodeView>
  {getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-theme-complete')}
</CodeView>

Set the color of the ring to the complete color and solid fill.
